<script>
export default {
  name: 'vehicle-basic-info',
  props: {
    detail: {
      type: Object,
      required: true
    }
  }
}
</script>

<template>
  <div class="vehicle-basic-info">
    <el-row :gutter="30" justify="center">
      <el-col class="yjddrq" :span="6"><span>车辆编号：</span><label>{{ detail.id }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>车牌号码：</span><label>{{ detail.licensePlate }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>车型名称：</span><label>{{ detail.truckTypeName }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>车辆体积：</span><label>{{ detail.allowableVolume }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>车辆载重：</span><label>{{ detail.allowableLoad }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>GPSID：</span><label>{{ detail.deviceGpsId }}</label></el-col>
    </el-row>
    <el-row :gutter="30" style="margin-top: 20px">
      <el-col class="yjddrq" :span="24">
        <span>驾驶证图片：</span>
        <img :src="detail.picture.split(',')[0]" alt="">
        <img :src="detail.picture.split(',')[1]" alt="">
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.yjddrq {
  float: left;
  color: #20232a;
  font-size: 14px;
  margin-top: 25px;
}

.yjddrq label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #818693;
}

img {
  width: 250px;
  height: 150px;
  margin: 0 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
}
</style>
